import {Button, Form, InputNumber, message, Modal, Select, Space} from 'antd';
import React from 'react';
import {ProFormText, ProFormTextArea} from '@ant-design/pro-form';
import "./index.css";
import {ModalFormProps} from "@/assets/components/modalFormProps";

/**
 * 列表组件
 * @param props
 * @constructor
 */
const ModalForm = (props: ModalFormProps) => {
  const form = props.form || Form.useForm()[0];
  const handleSave = props.handleSave;
  const {columns, visible, onCancel} = props;

  return (
    <Modal
      destroyOnClose
      title="保存"
      visible={visible}
      onCancel={onCancel}
      footer={null}
      maskClosable={false}
    >
      <Form
        layout={"vertical"}
        form={form}
        // onFinish={handleSave}
        preserve={false}
      >
        <Form.Item name="id" className={"formItemHidden"}></Form.Item>
        {
          columns.map((column: any) => {
            let html
            if (!column.hideInForm) {
              if (column.valueType !== "option") {
                if (column.renderFormItem) {
                  html = column.renderFormItem(null, null, form);
                } else {
                  switch (column.valueType) {
                    case "selectMultiple":
                      html =
                        // @ts-ignore
                        <Form.Item key={column.dataIndex} name={column.dataIndex} label={column.title}
                                   rules={column.formItemProps && column.formItemProps.rules}>
                          <Select placeholder={"请选择" + column.title}
                                  mode="multiple"
                                  optionFilterProp={"label"}
                            // @ts-ignore
                                  onChange={(value) => column.onChange && column.onChange(value, message.loading('正在加载'))}
                            // @ts-ignore
                                  options={column.fieldProps && column.fieldProps.options}>
                          </Select>
                        </Form.Item>
                      break;
                    case "select":
                      html =
                        // @ts-ignore
                        <Form.Item key={column.dataIndex} name={column.dataIndex} label={column.title}
                                   rules={column.formItemProps && column.formItemProps.rules}>
                          <Select showSearch placeholder={"请选择" + column.title}
                                  optionFilterProp={"label"}
                            // @ts-ignore
                                  onChange={(value) => column.onChange && column.onChange(value, message.loading('正在加载'))}
                            // @ts-ignore
                                  options={column.fieldProps && column.fieldProps.options}>
                          </Select>
                        </Form.Item>
                      break;
                    case "password":
                      html = <ProFormText.Password key={column.dataIndex} name={column.dataIndex} label={column.title}
                                                   placeholder={"请输入" + column.title}
                                                   rules={column.formItemProps && column.formItemProps.rules}/>;
                      break;
                    case "textarea":
                      html = <ProFormTextArea key={column.dataIndex} name={column.dataIndex} label={column.title}
                                              placeholder={"请输入" + column.title}
                                              rules={column.formItemProps && column.formItemProps.rules}/>;
                      break;
                    case "number":
                      html = <Form.Item key={column.dataIndex} name={column.dataIndex} label={column.title}
                                        rules={column.formItemProps && column.formItemProps.rules}>
                              <InputNumber placeholder={"请输入" + column.title} style={{width: "100%"}}/>
                              </Form.Item>;
                      break;
                    default:
                      // @ts-ignore
                      html = <ProFormText key={column.dataIndex} name={column.dataIndex} label={column.title}
                                          placeholder={"请输入" + column.title}
                                          rules={column.formItemProps && column.formItemProps.rules}/>
                  }
                }
              }
            }
            return html;
          })
        }
        { props.extraFormItems && props.extraFormItems()}
        <Form.Item style={{textAlign: "right"}}>
          <Space>
            <Button onClick={onCancel}>
              取消
            </Button>
            <Button type="primary" onClick={handleSave}>
              提交
            </Button>
            {props?.extraButton}
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  )
};

export default ModalForm;
